﻿
@model  ScadaWeb.Model.ScadaEquipmentModel
@{
    ViewBag.Title = "设备实时曲线";
    Layout = "~/Views/Shared/_LayoutForm.cshtml";
}
<!--引用多选下拉框-->

<script src="~/Content/lib/echarts/echarts.min.js"></script>

<form class="layui-form layui-col-md12 ok-search">
    <!--条件筛选区域-->
    <div class="layui-row">
        <div class="layui-input-inline">
            <div id="paralist" style="width:350px;"></div>
        </div>
        <div class="layui-input-inline">
            <input type="radio" name="chartstyle" value="1" title="叠加" checked="" style="width:50px;">
            <input type="radio" name="chartstyle" value="2" title="轮播" style="width:50px;">
            <input type="radio" name="chartstyle" value="3" title="分区" style="width:50px;">
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-normal" onclick="ReadHistorySeries()">确定</button>
        </div>
    </div>
</form>
<hr class="layui-bg-orange">

<div class="layui-row">
    <div id="stackrealchart" style="width:100%;height:500px"></div>
</div>





<script>


     var serieitems = JSON.parse('@MvcHtmlString.Create(Model.JsonParas)');
        for (var i = 0; i < serieitems.length; i++) {

            serieitems[i].name = serieitems[i].ParaTitle;
            serieitems[i].value = serieitems[i].ParaName;
            serieitems[i].selected = false;
                ;
     
        }

        var series = xmSelect.render({
            el: '#paralist',
            filterable: true,
            paging: true,
            pageSize: 50,
            language: 'zn',
            data: serieitems,
            radio: false
        });


    layui.use(["form", "okLayer", "okUtils", "laydate"], function () {
        let form = layui.form;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        var $ = layui.$;

    });
    var myChart = echarts.init(document.getElementById('stackrealchart'));
    var charttype = 1;
    var option = null;
    var seriesindex = series.getValue('valueStr');
    var lastDate = null;
    //初始化选择的井的历史数据
    function ReadHistorySeries() {
        myChart = echarts.init(document.getElementById('stackrealchart'));
        myChart.clear();

        var groupname = "@Model.ModelTitle";

        //图显示样式
        charttype = $("input[name='chartstyle']:checked").val();
        seriesindex = series.getValue('valueStr');
        var sdate = "@DateTime.Now.AddHours(-1).ToString("yyyy-MM-dd HH:mm:ss")";
        var edate = "@DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")";
        if (sdate == "" || sdate == undefined) {
            return;
        }
        if (edate == "" || edate == undefined) {
            return;
        }
        //获取用户选择的指标



        var para = {
            groupid: '@Model.GroupId',
            serverid: '@Model.ServerId',
            communicateid: '@Model.CommunicationId',
            deviceid: '@Model.DeviceId',
            equipmentid: '@Model.Id',
            charttype: charttype,
            selectserie: seriesindex,
            sdate: sdate,
            edate: edate
        };
        $.post("/Scada/ScadaGeneral/EquipmentHistorySeriesData", para, function (result) {

            var res = JSON.parse(JSON.stringify(result).replace("-9999", ""));
            var yAxiss = new Array();
            var xAxiss = new Array();//分区显示要用,叠加显示不需要此集合
            var grids = new Array();
            var gridheight = 80 / res.yAxis.length;
            for (var i = 0; i < res.yAxis.length; i++) {
                if (res.yAxis[i].data == undefined || res.yAxis[i].data == null)
                    res.yAxis[i].data = [];
                yAxiss.push({
                    type: "value",
                    data: res.yAxis[i].data,
                    name: res.yAxis[i].name,

                    offset: i * 40,
                    minorTick: {
                        show: true
                    },
                    splitLine: { show: true },
                    minorSplitLine: {
                        show: true
                    },
                    position: 'left',
                    nameRotate: 90,
                    nameLocation: 'middle',


                })

                xAxiss.push({
                    type: "category",
                    data: res.xAxis[0].data,

                    minorTick: {
                        show: true
                    },

                })
                grids.push({

                    top: (4 + i * gridheight + 2).toString() + '%',
                    bottom: (4 + (i + 1) * gridheight).toString() + '%',
                    height: gridheight.toString() + '%'
                });
            }

            var series = new Array();
            var series3 = new Array();
            for (var i = 0; i < res.series.length; i++) {
                series.push({
                    id: res.series[i].id,
                    type: res.series[i].type,
                    data: res.series[i].data,
                    name: res.series[i].name,
                    yAxisIndex: i,
                    showSymbol: res.series[i].showSymbol,
                    symbol: res.series[i].symbol,
                    symbolSize: res.series[i].symbolSize,

                    itemStyle: {
                        color: res.series[i].lineStyle.color,
                        width: res.series[i].lineStyle.width,
                        type: res.series[i].lineStyle.type,

                    }

                });
                series3.push({
                    id: res.series[i].id,
                    type: res.series[i].type,
                    data: res.series[i].data,
                    name: res.series[i].name,
                    yAxisIndex: i,
                    xAxisIndex: i,
                    showSymbol: res.series[i].showSymbol,
                    symbol: res.series[i].symbol,
                    symbolSize: res.series[i].symbolSize,

                    itemStyle: {
                        color: res.series[i].lineStyle.color,
                        width: res.series[i].lineStyle.width,
                        type: res.series[i].lineStyle.type,

                    },

                    markLine: {
                        data: [
                            {
                                type: 'average',
                                name: '平均值',
                                label: {
                                    position: 'end',
                                    formatter: "平均值{c}"
                                },
                                lineStyle: { color: "#00FF00" }
                            },

                            {
                                symbol: 'circle',
                                label: {
                                    position: 'end',
                                    formatter: "最大值{c}"

                                },
                                type: 'max',
                                name: '最高点',
                                lineStyle: { color: "#FF0000" }
                            },
                            {
                                symbol: 'circle',
                                label: {
                                    position: 'end',
                                    formatter: "最小值{c}"

                                },
                                type: 'min',
                                name: '最底点',
                                lineStyle: { color: "#0000FF" }

                            }

                        ]
                    },


                })

            }
            if (charttype == 3)//如果是独立分区显示的话要设置坐标轴所在的每个单元
            {
                for (var i = 0; i < res.yAxis.length; i++) {
                    yAxiss[i].gridIndex = i;
                    yAxiss[i].offset = 0;

                    xAxiss[i].gridIndex = i;


                }
            }
            if (charttype == 1)//叠加显示,曲线图元是 stackrealchart
            {
                $("#stackrealchart").css('width', $(window).width() - 150);
                $("#stackrealchart").css('height', $(window).height() - 120);

                // 基于准备好的dom，初始化echarts实例

                // 指定图表的配置项和数据
                option = {
                    title: {
                        text: groupname + '实时采集曲线',
                        left: 'center',
                        subtext: '数据来源LAZY OS 系统'
                    },
                    tooltip: {
                        trigger: 'none',
                        axisPointer: {
                            type: 'cross'
                        }
                    },

                    legend: {
                        data: res.legend.data,
                        left: 10,

                        x: 'center',      //可设定图例在左、右、居中
                        y: 'bottom',     //可设定图例在上、下、居中
                    },

                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    grid: {
                        left: '4%',
                        right: '4%',
                        bottom: '7%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: "category",
                            data: res.xAxis[0].data,
                            minorTick: {
                                show: true
                            },
                            minorSplitLine: {
                                show: true
                            },
                            splitLine: { show: false },
                        }
                    ],
                    series: series,
                    yAxis: yAxiss,

                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, true);
                $("#stackrealchart").css('width', $(window).width() - 150);
                $("#stackrealchart").css('height', $(window).height() - 120);
                myChart.resize();

            }
            else if (charttype == 2)//轮播显示
            {
                $("#stackrealchart").css('width', $(window).width() - 150);
                $("#stackrealchart").css('height', $(window).height() - 20);

                var series2 = new Array();
                for (var i = 0; i < res.series.length; i++) {
                    series2.push({
                        id: res.series[i].id,
                        type: res.series[i].type,

                        name: res.series[i].name,

                        showSymbol: res.series[i].showSymbol,
                        symbol: res.series[i].symbol,
                        symbolSize: res.series[i].symbolSize,

                        itemStyle: {
                            color: res.series[i].lineStyle.color,
                            width: res.series[i].lineStyle.width,
                            type: res.series[i].lineStyle.type,

                        }

                    })
                }

                // 基于准备好的dom，初始化echarts实例

                // 指定图表的配置项和数据
                option = {
                    baseOption: {
                        timeline: {
                            data: res.legend.data,
                            axisType: 'category',
                            show: true,
                            autoPlay: true,
                            playInterval: 10000,

                        },
                        title: {
                            text: groupname + '实时采集曲线',
                            left: 'center',
                            subtext: '数据来源LAZY OS 系统'
                        },
                        calculable: true,
                        tooltip: {
                            trigger: 'none',
                            axisPointer: {
                                type: 'cross'
                            }
                        },

                        legend: {
                            data: res.legend.data,
                            left: 10,
                            x: 'center',      //可设定图例在左、右、居中
                            y: 'bottom',     //可设定图例在上、下、居中

                        },
                        grid: [{
                            top: 80,
                            bottom: 100
                        }],
                        toolbox: {
                            show: true,
                            feature: {
                                dataView: { show: true, readOnly: false },
                                magicType: { show: true, type: ['line', 'bar'] },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },


                        xAxis: [
                            {
                                type: "category",

                                minorTick: {
                                    show: true
                                },
                                minorSplitLine: {
                                    show: true
                                },
                                splitLine: { show: false },

                            }

                        ],
                        series: [{
                            type: 'line',

                        }],

                        yAxis: [{
                            type: 'value',
                            name: "实时值",
                            minorTick: {
                                show: true
                            },
                            splitLine: { show: true },
                            minorSplitLine: {
                                show: true
                            },

                            position: 'left',
                            nameRotate: 90,
                            nameLocation: 'middle',

                        }
                        ],


                    },
                    options: []
                };

                option.options = new Array();
                for (var i = 0; i < res.yAxis.length; i++) {
                    option.options.push({
                        yAxis: {
                            type: 'value',
                            name: res.yAxis[i].name,
                        },
                        xAxis: {
                            type: 'category',
                            name: res.xAxis[0].name,
                            data: res.xAxis[0].data,
                        },
                        series: {
                            id: series2[i].id,
                            markLine: {
                                data: [
                                    {
                                        type: 'average',
                                        name: '平均值',
                                        label: {
                                            position: 'end',
                                            formatter: "平均值{c}"
                                        },
                                        lineStyle: { color: "#00FF00" }
                                    },

                                    {
                                        symbol: 'circle',
                                        label: {
                                            position: 'end',
                                            formatter: "最大值{c}"

                                        },
                                        type: 'max',
                                        name: '最高点',
                                        lineStyle: { color: "#FF0000" }
                                    },
                                    {
                                        symbol: 'circle',
                                        label: {
                                            position: 'end',
                                            formatter: "最小值{c}"

                                        },
                                        type: 'min',
                                        name: '最底点',
                                        lineStyle: { color: "#0000FF" }

                                    }

                                ]
                            },
                            type: res.series[i].type,
                            data: res.series[i].data,

                            yAxisIndex: 0,
                            xAxisIndex: 0,
                            showSymbol: res.series[i].showSymbol,
                            symbol: res.series[i].symbol,
                            symbolSize: res.series[i].symbolSize,
                            itemStyle: {
                                color: res.series[i].lineStyle.color,
                                width: res.series[i].lineStyle.width,
                                type: res.series[i].lineStyle.type,

                            }
                        }
                    })
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, true);
                $("#stackrealchart").css('width', $(window).width() - 150);
                $("#stackrealchart").css('height', $(window).height() - 20);
                myChart.resize();
            }
            else if (charttype == 3)//分区显示
            {
                $("#stackrealchart").css('width', $(window).width() - 150);
                $("#stackrealchart").css('height', 250 * res.yAxis.length);

                option = {

                    title: {
                        text: groupname + '实时采集曲线',
                        left: 'center',
                        subtext: '数据来源LAZY OS 系统'
                    },
                    tooltip: {
                        trigger: 'none',
                        axisPointer: {
                            type: 'cross'
                        }
                    },

                    legend: {
                        data: res.legend.data,
                        left: 10,
                        x: 'center',      //可设定图例在左、右、居中
                        y: 'bottom',     //可设定图例在上、下、居中

                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    grid: grids,
                    series: series3,
                    yAxis: yAxiss,
                    xAxis: xAxiss,
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, true);
                $("#stackrealchart").css('width', $(window).width() - 150);
                $("#stackrealchart").css('height', 250 * res.yAxis.length);
                myChart.resize();
            }
            SCADA.RealDataCustumTimer(LoadRealData, updatecycle);
        });

    }
    var updatecycle = 10;
    var maxpoint = 500;
   //读取实时数据
    //数据表定时加载
    function LoadRealData() {
        
  
    
        if (option == undefined) {
            return;
        }
      
        var para = {
             groupid: '@Model.GroupId',
            serverid: '@Model.ServerId',
            communicateid: '@Model.CommunicationId',
            deviceid: '@Model.DeviceId',
            equipmentid: '@Model.Id',
            charttype: charttype,
            selectserie: seriesindex,
            sdate: "",
            edate: ""
        };
        var groupname ="实时曲线";
    
        //实时读取数据
        ///API/Page/ApiQueryRealSeriesData
        
        $.post("/Scada/ScadaGeneral/EquipmentRealSeriesData", para,function (result) {

            //实时增加曲线数据
            if (result == undefined || result == null || result.Date == null || result.Date == null)
                return;
            if (lastDate == null || lastDate == "") { lastDate = result.Date; }
            else {
                var start = new Date(lastDate.replace("-", "/").replace("-", "/"));
                var end = new Date(result.Date.replace("-", "/").replace("-", "/"));
                if (end <= start) {
                    return;
                }
                else
                {
                    lastDate = result.Date;
                }

            }
           
            //图显示样式
           
            if (charttype == 2) {
                for (var i = 0; i < option.options.length; i++) {
                   
                        for (var p in result.Data) {
                            if (result.Data[p].Name == option.options[i].series.id) {
                                if (option.options[i].series.data == null)
                                    option.options[i].series.data = [];
                                option.options[i].series.data.push(result.Data[p].Value);
                                if (option.options[i].series.data.length >= 500) {
                                    option.options[i].series.data.shift();
                                }
                            }
                        }
                    
                }


                for (var a = 0; a < option.baseOption.xAxis.length; a++) {
                    if (option.baseOption.xAxis[a].data == null)
                        option.baseOption.xAxis[a].data = [];
                    option.baseOption.xAxis[a].data.push(result.Date);
                    if (option.baseOption.xAxis[a].data.length >= 500) {
                        option.baseOption.xAxis[a].data.shift();
                    }

                }

            }
            else {
                for (var i = 0; i < option.series.length; i++) {

                    for (var p in result.Data) {
                        if (result.Data[p].Name == option.series[i].id) {
                            if (option.series[i].data.data == null)
                                option.series[i].data.data = [];
                            option.series[i].data.push(result.Data[p].Value);
                            if (option.series[i].data.length >= 500) {
                                option.series[i].data.shift();
                            }

                        }

                    }


                }

                //增加日期数据
                for (var a = 0; a < option.xAxis.length; a++) {
                    if (option.xAxis[a].data == null)
                        option.xAxis[a].data = [];
                    option.xAxis[a].data.push(result.Date);
                    if (option.xAxis[a].data.length >= 500) {
                        option.xAxis[a].data.shift();
                    }

                }

            }
            myChart.setOption(option);

        });

    }

</script>


